<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="left flex">
					<view :class="dateType == index ? 'on li' : 'li'" v-for="(item, index) in tabList" :key="index"
						@click="tabChange(index)">{{ item }}</view>
				</view>
				<view v-if="dateType == 0" class="right" @click="show1 = true">{{ kssj ? kssj : '选择日期' }}</view>
				<view v-else class="right" @click="show2 = true">{{ ksyf ? ksyf : '选择日期' }}</view>
			</view>
			<view class="flex-cb mt40">
				<view class="xbox">
					<view class="f24 c6">{{ dateType == 0 ? '当' : '本' }}月收入共{{ info.incomeNum || 0 }}笔，合计：</view>
					<view class="f28 c2 mt10">{{ info.incomePrice || 0 }}</view>
				</view>
				<view class="xbox">
					<view class="mt1 f24 c6">{{ dateType == 0 ? '当' : '本' }}月支出共{{ info.expendNum || 0 }}笔，合计：</view>
					<view class="mt10 f28 c2">{{ info.expendPrice || 0 }}</view>
				</view>
			</view>
		</view>
		<template v-if="show">
			<view class="card">
				<view class="bt">收支趋势</view>
				<view class="tbBox">
					<echarts ref="echarts" :option="option" canvasId="echartsa" style="width: 100%;height: 100%">
					</echarts>
				</view>
			</view>
			<view class="card">
				<view class="bt">订单笔数趋势</view>
				<view class="tbBox">
					<echarts ref="echarts" :option="optionb" canvasId="echartsb" style="width: 100%;height: 100%">
					</echarts>
				</view>
			</view>
			<view class="card">
				<view class="bt">当{{ dateType == 0 ? '日' : '月' }}收入来源分析</view>
				<view class="tbBox">
					<echarts ref="echarts" :option="optionc" canvasId="echartsc" style="width: 100%;height: 100%">
					</echarts>
				</view>
			</view>
		</template>
		<u-datetime-picker  v-model="value1" :show="show1" :maxDate="max" mode="date" @cancel="show1 = false"
			@confirm="bindTimeChange"></u-datetime-picker>
		<u-datetime-picker  v-model="value2" :show="show2" :maxDate="max" mode="year-month" @cancel="show2 = false"
			@confirm="bindTimeChange"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils';
	export default {
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				dayMoney: '',
				kssj: getYMDHMS(new Date()).slice(0, 10),
				ksyf: getYMDHMS(new Date()).slice(0, 7),
				nowe: getYMDHMS(new Date()).slice(0, 10),
				dateType: 0,
				info: {},
				show: true,
				tabList: ['日报', '月报'],
				show1: false,
				show2: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				max: Number(new Date()),
				des: '',
				option: {},
				optionb: {},
				optionc: {},
			};
		},
		onLoad(options) {
			this.getDetail();
		},
		onReady() {
			this.option = {
				grid: {
					left: '13%',
					top: '10%',
					right: '10%',
					bottom: '20%',
				},
				tooltip: {
					show: true,
					trigger: 'axis'
				},
				legend: {
					bottom: '2%',
					left: 'center'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
					// show: false
				},
				yAxis: {
					x: 'center',
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					}
					// show: false
				},
				series: []
			};
			this.optionb = {
				xAxis: {
					type: 'category',
					data: []
				},
				grid: {
					left: '12%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [],
					type: 'bar'
				}]
			};
			this.optionc = {
				grid: {
					left: '3%',
					right: '4%',
					top: '3%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				tooltip: {
					trigger: 'axis'
				},
				yAxis: {
					type: 'category',
					data: [],
				},
				series: [{
					type: 'bar',
					data: [],
				}]
			};
		},
		methods: {
			getEcharts(data, datab) {
				this.option = {
					grid: {
						left: '13%',
						top: '10%',
						right: '10%',
						bottom: '20%',
					},
					legend: {
						bottom: '2%',
						left: 'center'
					},
					tooltip: {
						show: true,
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.inAndOutData.map(s => s.day),
					},
					yAxis: {
						x: 'center',
						type: 'value',
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						}
						// show: false
					},
					series: [{
							name: '收入',
							smooth: true,
							type: 'line',
							data: data.inAndOutData.map(s => s.incomePrice)
						},
						{
							name: '支出',
							smooth: true,
							type: 'line',
							data: data.inAndOutData.map(s => s.expendPrice)
						}
					]
				};
				this.optionb = {
					xAxis: {
						type: 'category',
						data: data.orderNumData.map(s => s.day)
					},
					grid: {
						left: '12%',
						top: '10%',
						right: '10%',
						bottom: '10%',
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: data.orderNumData.map(s => s.orderCount),
						type: 'bar'
					}]
				};
				this.optionc = {
					grid: {
						left: '3%',
						right: '4%',
						top: '3%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					tooltip: {
						trigger: 'axis'
					},
					yAxis: {
						type: 'category',
						data: data.incomeSourceData.map(s => s.orderType),
					},
					series: [{
						type: 'bar',
						data: data.incomeSourceData.map(s => s.countPrice),
					}],
					
				};
			},
			getDetail() {
				this.$app.ajax({
					data: {
						param: {
							dateType: this.dateType,
							date: this.dateType == 0 ? this.kssj : this.ksyf + '-01'
						}
					},
					api: this.$api.operationAnalysis()
				}).then(res => {
					if (res.errorCode != '000000') return;
					this.info = res.record;
					this.getEcharts(res.record)
				});
			},
			bindTimeChange: function(e) {
				this.show1 = false
				this.show2 = false
				if (this.dateType === 0) {
					this.kssj = getYMDHMS(e.value).slice(0, 10)
					console.log('this.kssj', this.kssj);
				} else {
					this.ksyf = getYMDHMS(e.value).slice(0, 7)
					console.log('this.ksyf', this.ksyf, e);
				}

				this.getDetail();
			},
			tabChange: function(index) {
				this.dateType = index
				this.getDetail();
			}
		}
	};
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.charts {
		width: 100%;
		height: 500rpx;
	}

	.head {
		padding: 20rpx 30rpx;
		position: relative;
		box-sizing: content-box;
	}

	.top {
		display: flex;

		.left {
			flex: 1;
		}

		.right {
			background-color: #fff;
			border-radius: 50rpx;
			padding: 6rpx 20rpx;
		}
	}

	.top .left view {
		width: 100rpx;
		height: 60rpx;
		background: #ffffff;
		border-radius: 36rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
	}

	.top .left view.on {
		background: #4167c1;
		color: #fff;
	}

	.date {
		height: 60rpx;
		background: #ffffff;
		border-radius: 36rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
		padding: 0 24rpx;
	}

	.card {
		box-sizing: border-box;
		margin: 30rpx auto 0;
		padding: 24rpx 30rpx;
		background: #fff;
	}

	.bt {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
	}

	.box {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.tbBox {
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		height: 500rpx;
	}
</style>